<template>
  <div
    class="roll-table"
    :style="{'--rownum': rowNum}"
  >
    <div class="roll-table-head">
      <div
        v-for="col in displayColumns"
        :key="col.prop"
        class="cell"
        :style="{width:col.width+'%'}"
      >
        <span class="cell-text" :style="col.headStyle || {}">{{col.label}}</span>
      </div>
    </div>
    <div
      class="roll-table-panel"
      @mouseenter="handleHover"
      @mouseleave="handleUnHover"
    >
      <template v-for="(pageData,i) in displayRowData">
        <transition
          name="slide"
          :key="i"
        >
          <div
            v-show="currentPanel===i"
            class="roll-table-body"
            :style="{overflow:isRoll?'hidden':'auto'}"
          >
            <div
              v-for="(row, index) in pageData"
              :key="index"
              :class="['row', rowClass ? rowClass(row) : '']"
              @click="handleRowClick(row)"
            >
              <div
                v-for="col in displayColumns"
                :key="col.prop"
                class="cell"
                :style="{width:col.width+'%'}"
              >
                <!-- <el-tooltip
                  class="item"
                  effect="dark"
                  :content="row[col.prop]?row[col.prop].toString():''"
                  placement="top"
                > -->
                <!-- <slot :name="`cell-${col.prop}`" :row="row" :column="col">
                    <span class="cell-text">{{row[col.prop]}}</span>
                  </slot> -->
                <!-- </el-tooltip> -->
                <span v-if="col.type==='index'">
                  {{index+1}}
                </span>
                <template v-else>
                  <slot
                    :name="`cell-${col.prop}`"
                    :row="row"
                    :column="col"
                  >
                    <span
                      class="cell-text"
                      :title="col.showLabelFn ? col.showLabelFn(row) : row[col.prop]"
                      :style="col.cellStyle || {}"
                    >{{col.showLabelFn ? col.showLabelFn(row) : row[col.prop]}}</span>
                  </slot>
                </template>
              </div>
            </div>
          </div>
        </transition>
      </template>
    </div>
    <div
      v-show="noData"
      class="no-data"
    >
      <svg-icon
        icon-class="nodata"
        class-name="nodata-icon"
      ></svg-icon>
      暂无数据
    </div>
  </div>
</template>
<script>
export default {
  props: {
    columns: {
      type: Array,
      default: () => []
    },
    rowData: {
      type: Array,
      default: () => []
    },
    rowNum: {
      type: Number,
      default: 5
    },
    rowClass: {
      type: Function
    },
    isRoll: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      currentPanel: 0,
      timer: null
    }
  },
  computed: {
    displayColumns() {
      const sum = this.columns.reduce(
        (prev, next) => {
          return { width: (prev.width | 0) + (next.width | 0) }
        },
        { width: 0 }
      )

      if (!sum.width) {
        sum.width = 1
      }

      const result = []
      this.columns.forEach((ele) => {
        let obj = { ...ele }
        if (!Number(ele.width)) {
          obj.width = 1 / sum.width
        } else {
          obj.width = (Number(ele.width) / sum.width) * 100
        }
        result.push(obj)
      })
      return result
    },
    displayRowData() {
      if (!this.isRoll) {
        return [this.rowData]
      }
      let result = []
      this.rowData.forEach((ele, index) => {
        const page = Math.floor(index / this.rowNum)
        if (!result[page]) {
          result[page] = []
        }
        result[page].push({ ...ele })
      })
      return result
    },
    noData() {
      return !this.rowData?.length
    }
  },
  methods: {
    runTimer() {
      if (!this.isRoll) {
        return
      }
      if (this.timer) {
        clearTimeout(this.timer)
      }
      this.timer = setTimeout(() => {
        if (this.currentPanel >= this.displayRowData.length - 1) {
          this.currentPanel = 0
        } else {
          this.currentPanel++
        }
        this.runTimer()
      }, 10000)
    },
    handleHover() {
      // 鼠标移动到表格中时，停止轮播
      // if (this.timer) {
      //   clearTimeout(this.timer)
      // }
    },
    handleUnHover() {
      // this.runTimer()
    },
    handleRowClick(row) {
      this.$emit('row-click', row)
    }
  },
  watch: {
    rowData(value) {
      if (value?.length) {
        if (this.timer) {
          clearTimeout(this.timer)
        }
        this.currentPanel = 0
        this.runTimer()
      }
    }
  },
  beforeDestroy() {
    // 清除定时器
    if (this.timer) {
      clearTimeout(this.timer)
    }
  }
}
</script>
<style lang="scss" scoped>
$header-cell-height: 32px;
$body-cell-height: 36px;
.roll-table {
  height: calc(#{$header-cell-height} + var(--rownum) * #{$body-cell-height});
  // border: 1px solid #e4e7ed;
  overflow: hidden;
  position: relative;
  .cell {
    float: left;
    font-size: 14px;
    padding: 0 5px;
    .cell-text {
      display: inline-block;
      width: 100%;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }
  .roll-table-head,
  .roll-table-body .row {
    overflow: hidden;
  }
  .roll-table-head {
    position: relative;
    z-index: 100;
    background: #f6f6f6;
    .cell {
      color: #515a6e;
      font-size: 13px;
      font-weight: 600;
      height: $header-cell-height;
      line-height: $header-cell-height;
      // border-bottom: 1px solid #dfe6ec;
      // &:not(:last-child) {
      // border-right: 1px solid #dfe6ec;
      // }
    }
  }
  .roll-table-body {
    position: absolute;
    width: 100%;
    top: $header-cell-height;
    left: 0;
    z-index: 50;
    height: calc(var(--rownum) * #{$body-cell-height});
    cursor: pointer;
    .row {
      &:hover {
        background-color: #f9f9f9;
      }
    // &.error {
    //   color: #f56c6c;
    // }
    // &:nth-child(even) {
    //   background: #fafafa;
    // }
    }
    .cell {
      height: $body-cell-height;
      line-height: $body-cell-height;
      color: #666666;
      padding: 0 10px;
      border-bottom: 1px solid #f6f6f6;
    }
  }
  .no-data {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 200;
    height: 100%;
    color: #cccccc;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    background-color: #ffffff;
    .nodata-icon {
      font-size: 77px;
      opacity: 0.5;
    }
  }
  .slide-enter-active {
    animation: slide-in 1.5s linear;
  }
  .slide-leave-active {
    animation: slide-out 1.3s linear;
  }
  @keyframes slide-in {
    0% {
      transform: translateY(100%);
    }
    20% {
      transform: translateY(100%);
    }
    100% {
      transform: translateY(0);
    }
  }
  @keyframes slide-out {
    0% {
      transform: translateY(0);
    }
    100% {
      transform: translateY(-100%);
    }
  }
  // 滚动条样式
  div::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  div::-webkit-scrollbar-track {
    background: #f2f2f2;
  }

  div::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 10px;
  }

  div::-webkit-scrollbar-thumb:hover {
    background: #cccccc;
  }

  div::-webkit-scrollbar-corner {
    background: #f2f2f2;
  }
}
</style>